<template>
  <el-cascader size="mini" ref="cascader" :props="prop" expandTrigger="hover" :show-all-levels="false" :clearable="clearable" @change="changeHandle($event)" v-model="area" />
</template>

<script>
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
export default {
  name: "dx-cascader",
  props: ["area_id", "area_name"],
  props: {
    maxLevel: {
      type: Number,
      default: Infinity,
    },
    position: {
      type: String,
      default: "",
    },
    area_id: {
      type: String | Number,
      default: "",
    },
    area_name: {
      type: String,
      default: "",
    },
    clearable: {
      type: Boolean,
      default: true,
    },
  },
  created() {
    var that = this;
    let accountInfo = JSON.parse(getSessionStorage("accountInfo")),
      areaName = that.position ? accountInfo.parentName : accountInfo.areaName;
    console.log("areaName: ", areaName);

    console.log("accountInfo: ", accountInfo);

    if (accountInfo.areaId) {
      this.$emit("update:area_id", accountInfo.areaId);
      this.$emit("update:area_name", areaName);
    }
  },
  data() {
    var that = this;
    let accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    return {
      area: this.area_id || accountInfo.areaId,
      id: "",
      lvl: "",
      prop: {
        lazy: true,
        checkStrictly: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          var areaId;
          var lvl;
          var areaName;
          if (level == 0) {
            areaId = accountInfo.areaId;
            areaName = that.position
              ? accountInfo.parentName
              : accountInfo.areaName;
            lvl = accountInfo.areaLvl;

            resolve([{ value: areaId, label: areaName, lvl: lvl }]);

            // $budgetAPI.getinitCompany(
            //   {},
            //   (res) => {
            //     areaId = res.content.areaId;
            //     areaName = res.content.areaName;
            //     lvl = res.content.areaLvl;

            //   },
            //   (err) => {
            //     console.log(err);
            //   }
            // );
          } else {
            if (level >= that.maxLevel) {
              resolve();
              return;
            }
            areaId = node.value;
            lvl = node.data.lvl;
            $budgetAPI.getCompanyByLvl(
              {
                areaId,
                lvl: that.position ? "" : lvl,
              },
              (res) => {
                if (res.code == 0) {
                  let nodes = res.content.map((item, index) => {
                    return {
                      value: item.areaId,
                      label: item.areaName,
                      lvl: item.areaLvl !== lvl ? item.areaLvl : "",
                    };
                  });
                  resolve(nodes);
                } else {
                  that.alertError(res);
                }
              }
            );
          }
        },
      },
    };
  },
  methods: {
    clear() {
      let obj = {};
      obj.stopPropagation = () => {};
      try {
        this.$refs.cascader.clearValue(obj);
      } catch (err) {
        this.$refs.cascader.handleClear(obj);
      }
    },
    changeHandle(event) {
      if (event) {
        let arr = event.slice(0);
        let value = arr.pop();
        this.$emit("update:area_id", value);
        // 触发父组件的change函数
        this.$emit("change", value);
        let data = this.$refs.cascader.getCheckedNodes()[0]
          ? this.$refs.cascader.getCheckedNodes()[0].data
          : "";
        if (data) {
          this.$emit("update:area_name", data.label);
          this.$emit("update:area_lvl", data.lvl);
        }
        this.$refs.cascader.dropDownVisible = false;
      }
    },
  },
};
</script>

<style lang="scss">
</style>
